import { Tabs } from 'antd';
import Cls from 'classnames';
import stylesOA from '../../common/stylesOA.less';
import React, { useContext, useMemo } from 'react';
import { DetailCheckListViewOA } from './DetailCheckListViewOA';
import { ICalibrateControllerContext } from '../../common/useOAContext';
import { DetailCenterFlowImageView } from './DetailCenterFlowImageView';
import { DetailInfoCenterViewMainOA } from './DetailInfoCenterViewMainOA';

export const DetailInfoCenterViewOA: React.FC = () => {
  /** 引入上下文 */
  const { styleFixCls, infoObj } = useContext(ICalibrateControllerContext);

  /** tabs的子页面 */
  const tabsItemMemo = useMemo(() => {
    let itemConfit: any[] = [
      {
        label: '申请单',
        key: infoObj?.id || '1',
        children: <DetailInfoCenterViewMainOA />,
      },
      {
        label: '办理意见',
        key: 'oaDetail-flowHanle',
        children: <DetailCheckListViewOA />,
      },
      {
        label: '流程跟踪',
        key: infoObj?.workflowID || '3',
        children: <DetailCenterFlowImageView />,
      },
    ];
    return infoObj?.id ? itemConfit : [];
  }, [infoObj]);

  return (
    <div className={Cls(`${styleFixCls}infoViewOA-centerBox`, stylesOA['purchase-tabsStyle'], 'purchase-stylesOA-theme')}>
      <Tabs items={tabsItemMemo} type="card" destroyInactiveTabPane={true} />
    </div>
  );
};
